<template>
  <el-dialog
    :title="middlewareObj.title"
    :visible.sync="middlewareObj.show"
    center
    width="560px"
    :before-close="handleClose">
    <div>
      <el-form ref="myForm" :inline="true" :model="middleware" :rules="rules" label-width="140px">
        <el-form-item prop="sourceId" label="设备编号">
          <el-input
            placeholder="请输入设备编号"
            clearable
            :disabled="isDisabled || middlewareObj.title === '编辑中间件设备'"
            v-model="middleware.sourceId"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备类型一级" prop="eqptParentTypeId">
          <el-select
            clearable
            filterable
            :disabled="isDisabled"
            v-model="middleware.eqptParentTypeId"
            @change="changeEqptOneType(middleware.eqptParentTypeId, '手动')"
            placeholder="设备一级类型">
              <el-option
                v-for="item in deviceOneTypeList"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="设备类型二级" prop="eqptTypeId">
          <el-select
            clearable
            filterable
            :disabled="isDisabled"
            v-model="middleware.eqptTypeId"
            placeholder="设备二级类型">
              <el-option
                v-for="item in deviceTwoTypeList"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="eqptName">
          <el-input :disabled="isDisabled" clearable v-model="middleware.eqptName" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="供应商" prop="supplierName">
          <el-input :disabled="isDisabled" clearable v-model="middleware.supplierName" placeholder="请输入供应商"></el-input>
        </el-form-item>
        <el-form-item label="设备地点" prop="areaTree">
          <el-cascader
             placeholder="请选择设备地点"
             v-model="middleware.areaTree"
            :options="eqptAddressData"
            clearable
          />
        </el-form-item>
        <el-form-item label="关联设备" prop="relationTree">
          <el-cascader
            v-model="middleware.relationTree"
            :options="correlationEqptTreeData"
            clearable>
          </el-cascader>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button v-if="!isDisabled" type="primary" @click="handleSure">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  getDeviceTypeList,
  getCorrelationEqptTreeData
} from '@/views/children/safety/js/device'
import { getFloorTreeList } from '../../lot/js/spaceShow'
import { validateStrLenNo, validateStrLen30 } from '@/utils/validate'

// 表单校验
const rules = {
  sourceId: [
    { required: true, message: '请输入设备编号', trigger: 'blur' },
    { validator: validateStrLenNo, trigger: 'blur' }
  ],
  eqptParentTypeId: [ { required: true, message: '请选择设备类型一级', trigger: 'change' } ],
  eqptTypeId: [ { required: true, message: '请选择设备类型二级', trigger: 'change' } ],
  eqptName: [
    { required: true, message: '请输入设备名称', trigger: 'blur' },
    { validator: validateStrLen30, trigger: 'blur' }
  ],
  supplierName: [{ required: false, validator: validateStrLen30, trigger: 'blur' }],
  areaTree: [ { required: true, message: '请选择设备地点', trigger: 'change' } ],
  relationTree: [ { required: true, message: '请选择关联设备', trigger: 'blur' } ]
}
export default {
  components: {},
  props: {
    middlewareObj: {
      type: Object,
      default: () => ({})
    },
    deviceOneTypeList: {
      type: Array,
      default: () => ([])
    }
  },
  computed: {
    isDisabled () {
      return this.middlewareObj.title === '查看中间件设备'
    }
  },
  data: () => ({
    middleware: {
      sourceId: '',
      eqptParentTypeId: '', // 设备类型一级
      supplierName: '',
      eqptTypeId: '', // 设备类型二级
      relationTree: [] // 关联设备id集合
    },
    rules,
    deviceTwoTypeList: [],
    correlationEqptTreeData: [],
    eqptAddressData: []
  }),
  methods: {
    handleSure () {
      this.$refs.myForm.validate((valid) => {
        if (valid) {
          delete this.middleware.eqptParentTypeId
          this.$emit('ok', this.middleware)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClose () {
      this.$emit('close')
    },
    async changeEqptOneType (val, type) {
      try {
        const res = await getDeviceTypeList({
          typeLevel: 2,
          typeParentId: val
        })
        if (res.code === 0) {
          if (type) this.middleware.eqptTypeId = ''
          this.deviceTwoTypeList = res.data
        }
      } catch (e) {}
    },
    async getFloorTreeList () {
      try {
        const res = await getFloorTreeList({
          parentId: 0
        })
        if (res.code === 0) {
          this.eqptAddressData = this.getNewTreeData(res.data)
        }
      } catch (e) {}
    },
    getNewTreeData (data) {
      if (data?.length) {
        data.forEach(n => {
          n.label = n.name
          n.value = n.id
          if (n?.children?.length) {
            this.getNewTreeData(n.children)
          } else {
            n.children = null
          }
        })
      }
      return data
    },
    async getCorrelationEqptTreeData () {
      // 获取关联设备树形数据
      try {
        const res = await getCorrelationEqptTreeData()
        if (res.code === 0) {
          this.correlationEqptTreeData = this.getNewTreeData(res.data)
        }
      } catch (e) {}
    },
    getNewCorelationEqptTreeData (data) {
      // 查看中间件设备 递归每个节点加上disabled 达到禁用状态
      if (data?.length) {
        data.forEach(n => {
          if (n?.children?.length) {
            n.disabled = true
            this.getNewCorelationEqptTreeData(n.children)
          } else {
            n.disabled = true
          }
        })
      }
      return data
    }
  },
  mounted () {
    this.middleware = { ...this.middleware, ...this.middlewareObj.row }
    this.getFloorTreeList()
    this.getCorrelationEqptTreeData()
    if (this.middleware.eqptParentTypeId) {
      this.changeEqptOneType(this.middleware.eqptParentTypeId)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content, .el-select, .el-cascader {
  width: 320px;
}
</style>
